<template>
  <div class="goodcommentcontent">
    <div class="item" v-for="item in showComment(curCate)" :key="item.id">
      <div class="top">
        <div class="uimg">
          <img :src="item.uimg" alt />
        </div>
        <div class="r">
          <p class="uname">{{item.uname}}</p>
          <p class="select">{{item.select}}</p>
        </div>
      </div>
      <div class="content">
        <p class="comment">{{item.context}}</p>
        <div class="imgs">
          <div>
            <img :src="item.img" alt />
          </div>
        </div>
      </div>
      <div class="bottom">
        <span class="date">{{item.date}}</span>
        <span class="zan">{{item.zan}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "GoodCommentContent",
  props: {
    datas: {
      type: Array
    }
  },
  data() {
    return {
      curCate: -1
    };
  },
  methods: {
    showComment(cateId) {
      if (this.datas) {
        if (cateId == -1) {
          return this.datas;
        } else {
          return this.datas.filter((item, index) => {
            return item.pinglun_categroy_id == cateId;
          });
        }
      }
    }
  },
  created() {
    this.$bus.$on("selectCate", res => {
      this.curCate = res;
    });
    this.$bus.$on("selectAll", res => {
      this.curCate = res;
    });
  }
};
</script>

<style lang="less" scoped>
.goodcommentcontent {
  padding: 5px;
  background-color: #fff;
  .item {
    padding: 10px 0;
    .top {
      display: flex;
      .uimg {
        width: 40px;
        height: 40px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .r {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding-left: 5px;
        .uname {
          flex: 1;
        }
        .select {
          flex: 1;
          color: #ccc;
        }
      }
    }
    .content {
      padding: 5px 0;
      .comment{
        padding-bottom: 5px;
      }
      .imgs {
        display: flex;
        div{
          width: 33.33%;
          img{
            width: 100%;
          }
        }
      }
    }
    .bottom{
      display: flex;
      justify-content: space-between;
      .zan{
        position: relative;
      }
      .zan::before{
        content: '';
        display: block;
        width: 15px;
        height: 15px;
        // background-color: coral;
        position: absolute;
        top: 0;
        left: 0;
        transform: translateX(-100%);
        background-image: url('~assets/images/icon/zan.svg');
        background-size: 100%;
      }
    }
  }
}
</style>